<template>

    <div>
      <div class="left_bg">
        <p class="head">ORDER聚造</p>

        <el-menu 
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#fff"
          :router="true"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
              <el-menu-item index="/index/category">分类区管理</el-menu-item>
              <el-menu-item index="/index/recommend">为你推荐管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/classify">分类管理</el-menu-item>
              <el-menu-item index="/index/brand">品牌管理</el-menu-item>
              <el-menu-item index="/index/products">商品管理</el-menu-item>
               <el-menu-item index="/index/personproduct">单品管理</el-menu-item>
             
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>新闻管理</span>
            </template>
             <el-menu-item-group>
              <el-menu-item index="/index/advertise">新闻管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
  
      </div>
      
      <div class="right_bg" >
       
         <!-- <b>{{ $route.meta.title}}</b>
         <div class="mu">
           <div class="op">
             系统设置/人员管理
             <div class="io">
        <el-avatar :size="50" :src="photo"></el-avatar>
        <div class="sup">
       <span><b>{{group.groupName}}</b></span>
       <el-toolip placeholder="bottom">
         <div slot="content" @click="dialogFormVisible =true" class="cursor">修改密码</div>
        <span>{{nickName}}</span>
       </el-toolip>
        </div>
       <div class="nam">小王,您好！</div>
       <el-button class="pink" type="danger"
       size="small"
       round
       icon="el-icon-switch-button"
       @click="logout">退出
       </el-button> -->
        <div class="boxtop">
             <p class="set_name">{{$route.meta.title}}</p>
            <!-- <img class="touxiang" src="../assets/img/touxiang.png" alt=""> -->
            <el-avatar :size="50" :src="photo" class="touxiang"></el-avatar>

            <el-tooltip placement="bottom">
            <p class="user">{{nickName}},您好！</p>
            <div slot="content" @click="dialogFormVisible=true">修改密码</div>
            
             </el-tooltip>


            <el-button type="danger" class="tuicgubox"  @click="logout">退出</el-button>

  </div>

        <router-view></router-view>
       
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="passWord" v-model="form.passWord"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="passWord" v-model="form.newPassWord"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="passWord" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
         <el-form-item>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="changePassWord">确定</el-button>
         </el-form-item>
      </el-form>
    </el-dialog>
    </div>
    <!-- </div>
    </div> -->
 
</template>

<script>
import md5 from "js-md5";
export default {
  name: "index",
  components: {},
  data() {
    return {
      photo: "",
      nickName: "",
      dialogFormVisible: false,
      form: {
        passWord: "",
        newPassWord: "",
        reNewPassWord: "",
      },
      group: {
        //选中的群组
        groupId: "",
        groupName: "",
      },
      menus: [], //菜单树
      rules: {
        passWord: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        reNewPassWord: [
          { required: true, message: "请重复输入新密码", trigger: "blur" },
          {
            validator:(rule, value, callback) =>{
              if (value === '') {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.form.newPassWord) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
   changePassWord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/admin/changePassWord',
            method: 'POST',
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord)
            },
          }).then((res) => {
            if (!res.errMsg) {
              this.dialogFormVisible=false
              this.$message({
                message: '修改密码成功',
                type: 'success',
                duration:3000
              });
              setTimeout(()=>{
               location.href = '#/login'
              },3000)
             
            }
          })
        } else {
          return false;
        }
      });
    },

    logout() {
      this.$confirm("是否退出登录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/admin/logout",
        }).then((res) => {
          if (res.errMsg) {
            this.$message.error(res.errMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
  },
  created() {
    console.log(this.$route);
    console.log('--------');
    console.log(this.$router);
    //从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if (!user) {
      // this.$router.push('./login')
      // history.reload()
      location.href = location.origin + "#/login";
    } else {
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/photo.png");
      //设置昵称
      this.nickName = user.nickName || "小王";
      //获取菜单
      // this.getMenus
    }
  },
  mounted() {},
};
</script>

<style>
.right_bg {
  /* background-color: rgb(239, 246, 252); */
  /* background-color: red; */
  /* position: absolute;
  left: 208px;
  top: 10px;
  width: 1050px;
  height: 768px;
  z-index: 2; */
  width: 1156px;
  height: 768px;
  position: absolute;
  margin-left: 210px;
  background: #eff6fc;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.boxtop{
  /* background-color: #2c2c2c; */
}

.left_bg {
  background-image: url("../assets/blackbg.png");
  position: absolute;
  width: 210px;
  height: 768px;
  background-color: red;
}

.head {
  font-size: 20px;
  font-family: "Microsoft YaHei UI";
  color: rgb(255, 255, 255);
  /* color: aqua; */
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  top: 5px;
  left: 15px;
  z-index: 15;
}

.shouye {
  background-image: url("../assets/home.png");
  position: relative;
  left: 20px;
  top: 5px;
  width: 15px;
  height: 15px;
  z-index: 5;
}

.shouyetext {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(170, 170, 170);
  line-height: 1.2;
  position: relative;
  left: 50px;
  top: -25px;
  z-index: 6;
}

.system {
  background-image: url("../assets/set_click.png");
  position: relative;
  left: 20px;
  top: -20px;
  width: 18px;
  height: 18px;
  z-index: 16;
}

.systemtext {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(170, 170, 170);
  line-height: 1.2;
  position: relative;
  left: 50px;
  top: -53px;
  z-index: 17;
}

.manage {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(170, 170, 170);
  line-height: 3;
  position: relative;
  left: 5px;
  top: -50px;
  z-index: 20;
}
.mu {
  height: 50px;
  width: 1115px;
  margin-top: 30px;
  margin-left: 37px;
  /* background-color: darkgreen; */
}
.op {
  margin-top: 10px;
  float: left;
  width: 1050px;
  height: 20px;
  font-size: 16px;
  color: #2c2c2c;
}
.io {
  display: flex;
 margin-left: 500px;
 margin-top: -15px;
  width: 350px;
  height: 50px;
  background-color: aqua;
}
.sup {
  /* margin-top: 14px; */
  margin-left: 8px;
  width: 90px;
  height: 19px;
  font-size: 14px;
  color: rgba(234, 185, 36, 1);
}
.nam {
  width: 100px;
  margin-top: 17px;
  font-size: 14px;
  /* background-color: #ed0606; */
  color: #2c2c2c;
}
.cursor{
 
  width: 60px;
}

.pink {
  margin-right: 20px;
  margin-top: 10px;
  width: 81px;
  height: 34px;
  font-size: 12px;
  color: #ffffff;
 
  text-align: center;
  background: #f56c6c;
  border-radius: 15px 15px 15px 15px;
}
.system_person {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(44, 44, 44);
  font-weight: bold;
  line-height: 1.2;
  /* text-align: center; */
  position: relative;
  left: 30px;
  top: 25px;
  z-index: 22;
}

.user {
  width: 150px;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: rgb(234, 185, 36);
  /* background-color: black; */
  line-height: 1.2;
  position: relative;
  left: 800px;
  top: -40px;
  z-index: 80;
}

.touxiang {
  height: 45px;
  height: 45px;
  position: relative;
  left: 750px;
  top: -5px;
}

.tuicgubox {
  width: 71px;
  height: 29px;
  background: #f56c6c;
  /* background-color: black; */
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  position: relative;
  left: 930px;
  top: -65px;
}

.text {
  font-size: 15px;
  color: white;
  /* background-color: black; */
  position: relative;
  text-align: center;
  top: 3px;
}

.box1 {
  background-color: white;
  /* background-color: black; */
  position: relative;
  left: 20px;
  /* top: 5px; */
  width: 1020px;
  height: 50px;
  /* z-index: 44; */
}

.time {
  font-size: 14px;
  font-family: "Microsoft YaHei UI";
  color: rgb(124, 124, 125);
  line-height: 2;
  position: relative;
  left: 20px;
  top: 10px;
  z-index: 56;
}

.timeinput {
  position: relative;
  left: 60px;
  top: -35px;
  width: 160px;
  height: 30px;
  z-index: 53;
}

.box2 {
  background-color: white;
  /* background-color: black; */
  position: relative;
  left: 20px;
  top: 10px;
  width: 1020px;
  height: 400px;
  /* z-index: 51; */
}

.serch {
  height: 32px;
  width: 72px;
  background-color: #f56c6c;
  /* background-color: black; */
  position: relative;
  border-radius: 8px;
  left: 270px;
  top: -83px;
}

.delete {
  height: 32px;
  width: 72px;
  background-color: #f56c6c;
  /* background-color: black; */
  position: relative;
  border-radius: 8px;
  top: -130px;
  left: 380px;
}

.box2li {
  float: left;
  color: gray;
  margin-top: 20px;
  margin-left: 150px;
}

.detailbox {
  width: 1020px;
  height: 300px;
  /* background-color: chartreuse; */
  /* background-color: black; */
  position: relative;
  top: 0px;
  display: flex;
  flex-direction: column;
}

.detail {
  width: 1020px;
  height: 30px;
  /* background-color:blue; */
  position: relative;
  color: gray;
  margin-top: 10px;
  flex: 1;
}

.date {
  position: relative;
  float: left;
  left: 50px;
}

.name {
  position: relative;
  float: left;
  left: 150px;
}

.address {
  position: relative;
  float: left;
  left: 280px;
}

.detail_edit {
  height: 32px;
  width: 72px;
  background-color: #f56c6c;
  /* background-color: black; */
  position: relative;
  border-radius: 8px;
  float: right;
  right: 180px;
  top: 12px;
}

.detail_delete {
  height: 32px;
  width: 72px;
  background-color: #f56c6c;
  /* background-color: black; */
  position: relative;
  border-radius: 8px;
  float: right;
  right: 10px;
  top: 12px;
}

.all {
  height: 40px;
  width: 160px;
  position: relative;
  /* background-color: rgb(152, 72, 250); */
  background-color: white;
  /* background-color: black; */
  left: 30px;
  top: -80px;
}

.choicebox {
  height: 40px;
  width: 300px;
  /* background-color: #F56C6C; */
  background-color: white;
  /* background-color: black; */
  position: relative;
  float: right;
  top: -130px;
  right: 15px;
}

.pageinput {
  position: relative;
  float: right;
  top: -40px;
}
</style>
